<template>
	<view class="page-content">
		<u-navbar title="我的订单" autoBack bgColor="#D9EDD4" fixed safeAreaInsetTop placeholder></u-navbar>
		
		<view class="container">
			<view class="tabs">
				<view class="title-order" :class="{'title-active':swiperIndex==1}" @click="changePage(1)">全部
				</view>
				<view class="title-order" :class="{'title-active':swiperIndex==2}" @click="changePage(2)">待付款
				</view>
				<view class="title-order" :class="{'title-active':swiperIndex==3}" @click="changePage(3)">待发货
				</view>
				<view class="title-order" :class="{'title-active':swiperIndex==4}" @click="changePage(4)">待收货
				</view>
				<view class="title-order" :class="{'title-active':swiperIndex==5}" @click="changePage(5)">待评价
				</view>
				<view class="title-order" :class="{'title-active':swiperIndex==6}" @click="changePage(6)">退款/售后
				</view>
			</view>
			
			<view class="goods-center">
				<view class="carGoodBox" v-if="goodData.length>0">
					<view class="good-item" v-for="(item,index) in goodData" :key="index">
						<!-- top -->
						<view class="item-top">
							<view class="shop-name">
								<u-icon size="20" name="/static/images/myOrder/icon_order-shop.png"></u-icon>
								<view class="shopName">{{item.travel.shop}}</view>
								<u-icon size="15" name="arrow-right"></u-icon>
							</view>
							<view class="order-status">
								<text v-if="item.status==0">待付款</text>
								<text v-else-if="item.status==1 && item.hasGive==0">待发货</text>
								<text v-else>交易完成</text>
							</view>
						</view>
						<!-- center -->
						<view class="item-center">
							<view class="carGood-top">
								<u--image :src="item.travel.content.slice(item.travel.content.indexOf(']')+2,item.travel.content.indexOf('￥')+5)" mode="aspectFill" width="100" height="100" radius='10'></u--image>
								<view class="goodIntroduce">
									<view class="goodDetail">{{item.travel.summary}}</view>
									<view class="goodPrice">￥{{item.price}}万</view>
								</view>
							</view>
							<view class="carGood-bottom">
								<view class="logistics-icon">
									<view class="sign-it" v-if="item.hasGive==1">
										<u-icon size="20" name="/static/images/myOrder/icon_order-getIt.png"></u-icon>
										<text class="getIt-text">运输中</text>
									</view>
									<view class="transporting" v-else>
										<u-icon size="20" name="/static/images/myOrder/icon_order-transport.png"></u-icon>
										<text class="transporting-text">待发货</text>
									</view>
								</view>
								<text class="logistics-text">韵达快递：【重庆市】您的快递已在代收点XX签收地方法规...</text>
							</view>
						</view>
						<!-- bottom -->
						<view class="item-bottom">
							<view class="bottom-btn">
								<view class="apply"><text class="apply-text">申请售后</text></view>
								<view class="check-transport"><text class="check-transport-text">查看物流</text></view>
								<view class="sure-get"><text class="sure-get-text">确定收货</text></view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 列表为空 -->
				<view v-else>
				    <view class="empty-box">
				        <u-empty icon="/static/images/hole.png" icon-size="150" mode="order" text-color="#038B00"></u-empty>
				        <navigator class="coreshop-btn" url="/pages/index/default/default" open-type="switchTab">随便逛逛</navigator>
				    </view>
				</view>
			</view>
			
			<view class="guessLike-bottom">
				<card cardName="猜你喜欢"></card>
				<goodList></goodList>
			</view>
		</view>
	</view>
</template>

<script>
	import card from "@/components/index/card.vue"
	import goodList from "@/components/index/goodList.vue"
	import carGoodCard from '@/components/index/carGoodCard.vue'
	export default {
		data(){
			return{
				// 切换订单id
				swiperIndex:1,
				goodData:[
					// {
					// 	shopName:'翡翠一姐',
					// 	goodUrl:'/static/images/goods/goods3.jpg',
					// 	goodDetail:'【典藏珍品】翡翠圆条手镯53mm 种老水润 玉质细腻 种色老',
					// 	goodPrice:'22',
					// 	isSign:false
					// }
				]
			}
		},
		components:{
			card,
			goodList,
			carGoodCard
		},
		onLoad(){
			this.getAllOrder();
		},
		methods:{
			// 滑动页面
			changePage(swiperIndex) {
				this.swiperIndex = swiperIndex;
				switch(swiperIndex){
					case 1:
						this.getAllOrder();
						break;
					case 2:
						this.getReadyPay();
						break;
					case 3:
						this.readyDelivery();
						break;
					case 4:
						this.goodData='';
						break;
					case 5:
						this.goodData='';
						break;
				}
			},
			// 获取全部订单
			getAllOrder(){
				uni.request({
					url:"http://localhost:3000/order/getOrdersByuserId",
					data:{
						userId: uni.getStorageSync('userId')
					},
					success:(res)=>{
						if (res?.data?.code == 200) {
							this.goodData = res?.data?.data;
						} 
					}
				})
			},
			//  获取待发货
			readyDelivery(){
				uni.request({
					url:"http://localhost:3000/order/getOrdersByhasGive",
					data:{
						// 先付款再发货
						status: 1,
						// 1为发货
						hasGive: 0,
					},
					success:(res)=>{
						if (res?.data?.code == 200 ) {
							this.goodData = res?.data?.data;
						} else {
							this.goodData = '';
							console.log(this.goodData);
						}
					},
					fail: (res) => {
						console.log(this.goodData);
					}
				})
			},
			// 获取待付款
			getReadyPay(){
				uni.request({
					url:"http://localhost:3000/order/getOrdersByStatus",
					data:{
						// 1为已付款
						status: 0
					},
					success:(res)=>{
						if (res?.data?.code == 200 ) {
							this.goodData = res?.data?.data;
						} else {
							this.goodData = '';
						}
					},
					fail: (res) => {
						console.log(this.goodData);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-content{
		.container{
			.tabs{
				display: flex;
				align-items: center;
				padding: $uni-spacing-col-base $uni-spacing-row-base;
				.title-order{
					font-size: $uni-font-size-base;
					color: $gs-color-grey;
					padding: $uni-spacing-col-sm 0;
					margin: 0 8px;
				}
				.title-active{
					font-size: $uni-font-size-lg;
					color: $gs-color-green;
				}
			}
			.goods-center{
				padding: $uni-spacing-col-base $uni-spacing-row-base;
				.carGoodBox{
					.good-item{
						background-color: $gs-jpBg;
						border-radius: 10px;
						margin-bottom: $uni-spacing-col-lg;
						padding: $uni-spacing-col-base $uni-spacing-row-lg;
						.item-top{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.shop-name{
								display: flex;
								align-items: center;
								.shopName{
									color: $uni-text-color;
									font-size: $uni-font-size-base;
									padding: 0 $uni-spacing-row-sm;
								}
							}
							.order-status{
								color: $gs-color-hot;
								font-size: $uni-font-size-base;
							}
						}
						.item-center{
							.carGood-top{
								display: flex;
								align-items: center;
								padding-top: $uni-spacing-row-lg;
								.goodIntroduce{
									padding: 0 $uni-spacing-row-base;
									.goodDetail{
										overflow: hidden;
										text-overflow: ellipsis;
										display:-webkit-box; 
										-webkit-box-orient:vertical;
										-webkit-line-clamp:2; 
									}
									.goodPrice{
										font-size: $uni-font-size-base;
										color: $gs-color-red;
										padding: $uni-spacing-row-base 0;
									}
								}
							}
							.carGood-bottom{
								display: flex;
								align-items: center;
								justify-content: space-between;
								padding: $uni-spacing-row-base 0;
								.logistics-icon{
									width: 30%;
									.sign-it,.transporting{
										display: flex;
										align-items: center;
										.getIt-text,.transporting-text{
											font-size: $uni-font-size-sm;
											color: $uni-text-color;
											padding: 0 $uni-spacing-row-sm;
										}
									}
								}
								.logistics-text{
									font-size: $uni-font-size-sm;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
						}
						.item-bottom{
							.bottom-btn{
								display: flex;
								align-items: center;
								justify-content: flex-end;
								.apply,.check-transport,.sure-get{
									border: solid 1px $uni-text-color-placeholder;
									border-radius: $uni-border-radius-lg;
									padding: 0 $uni-spacing-row-base;
									margin: 0 $uni-spacing-row-sm;
									line-height: 22px;
									.apply-text,.check-transport-text,.sure-get-text{
										font-size: $uni-font-size-base;
										color: $uni-text-color-placeholder;
									}
								}
								.sure-get{
									background-color: $gs-color-hot;
									border: solid 1px $gs-color-hot;
									.sure-get-text{
										color: $uni-text-color-inverse;
									}
								}
							}
						}
					}
				}
				
				.empty-box{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 40px 0;
					.coreshop-btn{
						background-image: linear-gradient(120deg, #54af53 0%, #84ca8d 100%);
						font-size: $uni-font-size-base;
						border-radius: 12px;
						padding: $uni-spacing-col-sm $uni-spacing-row-lg;
						margin-top: $uni-spacing-col-lg;
						width: fit-content;
						color: $uni-bg-color-grey;
					}
				}
			}
			.guessLike-bottom{
				padding-bottom: 30rpx;
			}
		}
	}
</style>